import React from 'react';
import {dark, light, baseURL} from '../../../config';
import {pxToDp} from '../../../utils/stylesKits';
import {
  Appearance,
  StyleSheet,
  StatusBar,
  View,
  ScrollView,
  Text,
  Image,
  TouchableOpacity,
} from 'react-native';
import {Icon} from '@ant-design/react-native';
import {connect} from 'react-redux';
import avatar from '../../../assets/image/avatar.png';

/**
 * APP Home-My 页面
 * @colorScheme 用户手机主题模式 是否开启了黑夜模式
 * */
const colorScheme = Appearance.getColorScheme() === 'dark' ? dark : light;

class My extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {}

  componentDidUpdate(prevProps, prevState) {}

  componentWillUnmount() {}

  render() {
    const {userInfo} = this.props;
    return (
      <View style={styles.container}>
        <StatusBar
          backgroundColor="transparent"
          barStyle={colorScheme.barStyle}
          translucent={true}
        />
        <Text style={styles.topBar}>我的</Text>
        <ScrollView>
          {userInfo ? (
            <TouchableOpacity
              style={styles.userInfo}
              onPress={() => this.props.navigation.navigate('HomePage')}>
              <Image
                style={styles.avatar}
                source={{
                  uri: `${baseURL}${userInfo.avatar}`,
                }}
              />
              <View style={styles.userInfoContent}>
                <Text style={styles.nickname}>{userInfo.nickname}</Text>
                <Text style={styles.job}>掏粪</Text>
              </View>
              <Icon
                name={'right'}
                size={pxToDp(18)}
                color={colorScheme.color}
              />
            </TouchableOpacity>
          ) : (
            <TouchableOpacity
              style={styles.userInfo}
              onPress={() => this.props.navigation.navigate('Login')}>
              <Image style={styles.avatar} source={avatar} />
              <Text style={styles.loginContent}>登陆/注册</Text>
              <Icon
                name={'right'}
                size={pxToDp(18)}
                color={colorScheme.color}
              />
            </TouchableOpacity>
          )}
          <View style={styles.userOptions}>
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('Test')}>
              <View style={styles.userOption}>
                <Icon name={'qq'} size={pxToDp(24)} color={'#2387d7'} />
                <Text style={styles.userOptionTitle}>消息中心</Text>
                <Text style={styles.userOptionNum} />
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('Login')}>
              <View style={styles.userOption}>
                <Icon name={'edit'} size={pxToDp(24)} color={'#cbf5cc'} />
                <Text style={styles.userOptionTitle}>创作者中心</Text>
                <Text style={styles.userOptionNum} />
              </View>
            </TouchableOpacity>
            <View style={styles.userOption}>
              <Icon name={'like'} size={pxToDp(24)} color={'#2bd42e'} />
              <Text style={styles.userOptionTitle}>我赞过的</Text>
              <Text style={styles.userOptionNum}>63篇</Text>
            </View>
            <View style={styles.userOption}>
              <Icon name={'heart'} size={pxToDp(24)} color={'#e8a633'} />
              <Text style={styles.userOptionTitle}>收藏</Text>
              <Text style={styles.userOptionNum}>12个</Text>
            </View>
          </View>
          <View style={styles.userOptions}>
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('Test')}>
              <View style={styles.userOption}>
                <Icon name={'setting'} size={pxToDp(24)} />
                <Text style={styles.userOptionTitle}>设置</Text>
                <Text style={styles.userOptionNum} />
              </View>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </View>
    );
  }
}

const mapStateToProps = state => ({userInfo: state.$userInfo.userInfo});
const mapDispatchToProps = {};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
  },
  topBar: {
    width: '100%',
    paddingTop: pxToDp(45),
    textAlign: 'center',
    lineHeight: pxToDp(60),
    fontSize: pxToDp(16),
    color: colorScheme.color,
    backgroundColor: colorScheme.backgroundColor,
  },
  userInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: pxToDp(2),
    padding: pxToDp(24),
    backgroundColor: colorScheme.backgroundColor,
  },
  avatar: {
    width: pxToDp(50),
    height: pxToDp(50),
    marginRight: pxToDp(25),
    borderRadius: pxToDp(25),
    borderWidth: pxToDp(1),
    borderColor: colorScheme.color,
  },
  userInfoContent: {
    flex: 1,
  },
  loginContent: {
    flex: 1,
    fontSize: pxToDp(20),
    color: colorScheme.color,
  },
  nickname: {
    fontSize: pxToDp(18),
    color: colorScheme.color,
  },
  job: {
    fontSize: pxToDp(12),
    color: colorScheme.color,
    opacity: 0.6,
  },
  userOptions: {
    marginTop: pxToDp(7),
  },
  userOption: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: pxToDp(18),
    marginBottom: pxToDp(2),
    backgroundColor: colorScheme.backgroundColor,
  },
  userOptionTitle: {
    flex: 1,
    paddingLeft: pxToDp(8),
    paddingRight: pxToDp(8),
  },
  userOptionNum: {
    fontSize: pxToDp(12),
    opacity: 0.7,
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(My);
